${response.setContentType("text/html")}
${response.setHeader("Cache-Control", "no-cache")}
${response.setCharacterEncoding("UTF-8")}
<#--${response.setContentType("text/plain")}-->
<html lang="en"><head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Connect Web Server</title>


    <!-- Framework CSS -->
    
    <link rel="stylesheet" href="static/css/blueprint/screen.css" type="text/css" media="screen, projection">
    <link rel="stylesheet" href="static/css/blueprint/print.css" type="text/css" media="print">
    <!--[if lt IE 8]><link rel="stylesheet" href="static/css/blueprint/ie.css" type="text/css" media="screen, projection"><![endif]-->

    <!-- Import fancy-type plugin for the sample page. -->
    <link rel="stylesheet" href="static/css/blueprint/fancytype.css" type="text/css" media="screen, projection">
    
    <!-- Custom styles to override framework -->
     <link rel="stylesheet" href="static/css/main.css" type="text/css" media="screen, projection">
    
    <style>
    #map-canvas, #map_canvas {
	  height:400px;
	}


    </style> 
 
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
    <script>
     	function loadRegion() {
		    var a=window.location.pathname;
		    var region = document.getElementById('region').value;
		    window.open(a+'?region='+region,"x");
		}
    
		var geocoder;
		var map;
		var lastMarker;
		
		function initialize() {
		  geocoder = new google.maps.Geocoder();
		  var latlng = new google.maps.LatLng(-34.397, 150.644);
		  var mapOptions = {
		    zoom: 5,
		    center: latlng,
		    mapTypeId: google.maps.MapTypeId.ROADMAP
		  }
		  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
		}
		
		function codeAddress(address) {
		 	if (lastMarker != undefined) lastMarker.setVisible(false);
		   geocoder.geocode( { 'address': address}, function(results, status) {
		    if (status == google.maps.GeocoderStatus.OK) {
		      map.setCenter(results[0].geometry.location);
		      var marker = new google.maps.Marker({
		          map: map,
		          position: results[0].geometry.location
		      });
		      lastMarker = marker;
		    } else {
		      alert('Unable to find that location because: ' + status);
		    }
		  });
		}
		
		google.maps.event.addDomListener(window, 'load', initialize);

    </script>
     
  </head>
<body>
    <div class="container">
   
   <div class="right box"> ${server.time.getTimeString()} ${server.time.getDateString()}
   <#if !session.isAnonymous()>
   <br/> User: ${session.getUser()} [<a href="doLogout">Logout</a>]
   <#else>
   <form action="/doLogin" method="GET" >
Username:<input name="name" type="text" /><BR/> Password:<input name="password" type="password"/><button name="Submit" type="submit">Login</button> 
</form>
   </#if>
 
   
   </div>
    
     <br/>
      <h1><a href="/"><img src="static/images/ConnectLogo.png"  alt="Connect" style="vertical-align:middle;" ></a>  Connect Web Server</h1>
         <hr>
      <div class="span-24">
        
        <!-- Content -->
        
        <p>This example uses the sample world database for mysql to display information about regions of the world.</p>
        
        Region:<select id="region">
        		<option>- Please Select -</option>
         <#assign dsRegion = data.getDataSource("JDBCRegionDataSource")>
	       <#list dsRegion.doQuery() as record>
	       <option>${record.get("Region")}</option> 
		  </#list>
        </select>
        <button onclick="loadRegion()">Show</button>
        
        <div id="map-canvas"></div>
               
         <#assign ds = data.getDataSource("JDBCDataSource")>
       <#assign region = request.getParameter("region")!"">
       <#if region != ""> 
       		<#assign ds = ds.setParam("region",region) >
       </#if>
        
        <table class="DataTable">
      
       <#assign isFirst=true>
       <#list ds.doQuery() as record>
       <tr>
       		<#if isFirst>
	       		<#list record.getKeys() as x>
	       			<th>${x}</th>
	       		</#list>
	       		</tr><tr>
	       		<#assign isFirst=false>
       		</#if>
       			<#list record.getKeys() as x>
       			  	<#if x=="Name">
       			  		<td><a href="#" onclick="codeAddress('${record.get(x)!""}')">${record.get(x)!""}</a></td>
       			  	<#else>
	       				<td>${record.get(x)!""}</td>
	       			</#if>
	       		</#list>
       			
     
       </tr>
	  </#list>
       </table> 
        
        
        <!-- Content End-->
      </div>
     
      <hr>
      <div class="last quiet right"> 
          <a href="http://www.binarycube.com"><img src="static/images/logo-bw.png" width="150" /></a><br/>
      </div>
</div>
  

</body></html>